{include file="public/header"/}
</head>
<body>
<div class="layui-form">
<div class="layui-fluid" id="LAY-component-layer-list">
<div class="layui-col-md12 pd83">
<div class="layui-card hideshadow">
  <div class="layui-tab layui-tab-brief">
  {include file="web/top"}
  <div class="layui-tab-content">

      <div class="layui-form-item" style="margin-bottom:5px;">
          <label class="layui-form-label pcfcms_layui-form-label">缩略图水印</label>
          <div class="layui-input-inline auto">
            <input type="checkbox" lay-filter="is_thumb_mark" lay-skin="switch" lay-text="开启|关闭" {if condition="isset($config.is_thumb_mark) && $config.is_thumb_mark eq 1"}checked{/if}>
            <input type="hidden" name="is_thumb_mark" value="{$config.is_thumb_mark|default='0'}"/>
          </div>
      </div>
      <div class="layui-form-item">
      <label class="layui-form-label pcfcms_layui-form-label"></label>
      <div class="layui-input-inline auto" style="color:#009688;">开启之后，满足水印条件的缩略图会自动打上水印</div>
      </div>

      <div class="layui-form-item" style="margin-bottom:5px;">
        <label class="layui-form-label pcfcms_layui-form-label">缩略图功能</label>
        <div class="layui-input-inline auto">
            <input type="checkbox" lay-filter="thumb_open" lay-skin="switch" lay-text="开启|关闭" {if condition='isset($config.thumb_open) && $config.thumb_open eq 1'}checked{/if}>
            <input type="hidden" name="thumb_open" value="{$config.thumb_open|default='0'}"/>
        </div>
      </div>
      <div class="layui-form-item">
      <label class="layui-form-label pcfcms_layui-form-label"></label>
      <div class="layui-input-inline auto" style="color:#009688;">全站图片进行缩略图处理</div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label pcfcms_layui-form-label">生成方式</label>
        <div class="layui-input-inline pcfcms_layui-input-inline">
         <input type="radio" name="thumb_mode" value="1" title="拉伸" {if condition="isset($config.thumb_mode) AND $config.thumb_mode eq 1"}checked="checked"{/if}>
          <input type="radio" name="thumb_mode" value="2" title="留白" {if condition="!isset($config.thumb_mode) OR $config.thumb_mode eq 2"}checked="checked"{/if}>
          <input type="radio" name="thumb_mode" value="3" title="裁减" {if condition="isset($config.thumb_mode) AND $config.thumb_mode eq 3"}checked="checked"{/if}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label pcfcms_layui-form-label">缩略图大小</label>
        <div class="layui-input-inline auto">
            <input style="width:50px;float:left" type="text" name="thumb_width" lay-verify="number" value="{$config.thumb_width}" class="layui-input"> <span style="float:left;line-height:38px;margin:0 4px;">X</span>
        </div>
        <div class="layui-input-inline auto">
            <input style="width:50px;float:left" type="text" name="thumb_height" lay-verify="number" value="{$config.thumb_height}" class="layui-input"> <span style="float:left;line-height:38px;margin-left:4px;">(宽 X 高) (像素)</span>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label pcfcms_layui-form-label"></label>
        <div class="layui-input-inline">
           <a href="javascript:void(0);" id="tag_call" data-field="thumb_open">缩略图标签高级调用？</a>
        </div>
      </div>

  </div>
  </div>
</div>
<div class="pcfclear"></div>
</div>
<div class="submit-info text-center">
    <button class="layui-btn" lay-submit lay-filter="formSubmit">确认提交</button>
</div>
</div>
</div>
{include file="public/loading"/}
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form','element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        setthumb('auto'); //关闭状态下禁用表单录入
        function setthumb(obj){
            if ('auto' == obj) {
                $('input[name="thumb_mode"]').attr('disabled', true).next().addClass('layui-radio-disbaled layui-disabled');
                $('input[name="thumb_width"]').attr('disabled', true);
                $('input[name="thumb_height"]').attr('disabled', true);
                $('input[name="thumb_color"]').attr('disabled', true);
                var thumb_open = $('input[name=thumb_open]').val();
                if (1 == thumb_open) {
                    $('input[name="thumb_mode"]').attr('disabled', false).next().removeClass('layui-radio-disbaled layui-disabled');
                    $('input[name="thumb_width"]').attr('disabled', false);
                    $('input[name="thumb_height"]').attr('disabled', false);
                    $('input[name="thumb_color"]').attr('disabled', false);
                }
            } else {
                var thumb_open = $('input[name=thumb_open]').val();
                if (1 == thumb_open) {
                    $('input[name="thumb_mode"]').attr('disabled', false).next().removeClass('layui-radio-disbaled layui-disabled');
                    $('input[name="thumb_width"]').attr('disabled', false);
                    $('input[name="thumb_height"]').attr('disabled', false);
                    $('input[name="thumb_color"]').attr('disabled', false);
                } else {
                    $('input[name="thumb_mode"]').attr('disabled', true).next().addClass('layui-radio-disbaled layui-disabled');
                    $('input[name="thumb_width"]').attr('disabled', true);
                    $('input[name="thumb_height"]').attr('disabled', true);
                    $('input[name="thumb_color"]').attr('disabled', true);
                } 
            }
        }

        $('#tag_call').click(function(){
            var name = $(this).data('field');
            $.ajax({
                type: "POST",
                url: "{:url('/web/ajax_tag_call')}",
                data: {name:name},
                dataType: 'json',
                success: function (res) {
                    if(res.status){
                        parent.layer.open({
                            type: 1,
                            title: '代码调用', 
                            shadeClose: true,
                            area: ['50%', '50%'],
                            content: res.data
                        });
                    }else{
                        layer.msg(res.msg, {icon: 2, time: 1000});
                    }
                },
                error:function(){
                    layer.msg("未知错误，操作中断！", {icon: 2, time: 1000});
                }
            });
        });

        // 监听开关
        form.on('switch', function(data){
          var elemId = data.elem.attributes['lay-filter']['nodeValue'];
          if (data.elem.checked) {
            this.value = 1;
          } else {
            this.value = 0;
          }
          $("input[name='"+elemId+"']").val(this.value);
          setthumb(this)
        });

        //监听提交
        form.on('submit(formSubmit)', function(data){
            layer.msg('正在处理请勿刷新页面', {icon: 16,shade: 0.01,time:3600000});
            $.ajax({
                type : 'post',
                url : "{:url('/web/thumb')}",
                data : data.field,
                dataType : 'json',
                success : function(res){
                    layer.closeAll('loading');
                    if(res.status){
                        layer.msg(res.msg, {icon: 1, time: 1000}, function(){
                            window.location.reload();
                        });
                    }else{
                        layer.msg(res.msg, {icon: 2, time: 1000});
                    }
                },
                error: function(e){
                    layer.closeAll('loading');
                    layer.msg("未知错误，操作中断！", {icon: 2, time: 1000});
                }
            });
            return false;
        });

    });
</script>
</body>
</html>